<template>
  <el-card>
    <el-row>
      <el-col :span="4">
        <el-button type="primary" :loading="requestSyncActivityOrder" @click="syncActivityOrder">从聚推客同步订单
        </el-button>
      </el-col>
      <el-col :span="9">
        <span>订单状态：</span>
        <el-select v-model="queryParam.status" placeholder="请选择" clearable @change="change" style="width: 50%;">
          <el-option v-for="item in orderStatus" :key="item.code" :label="item.msg" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="9">
        <span>用户UID：</span>
        <el-input v-model="queryParam.uid" placeholder="用户UID" style="width: 50%;"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="change()">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="orders" highlight-current-row stripe v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="#fafafa"
      style="width: 100%; margin-top: 10px;">
      <el-table-column type="index" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="actName" label="活动名称" align="center" width="100">
      </el-table-column>
      <el-table-column prop="orderTitle" label="标题" align="center">
      </el-table-column>
      <el-table-column prop="payPrice" label="付款金额" align="center" width="100">
      </el-table-column>
      <el-table-column prop="payTime" label="付款时间" align="center" width="200">
      </el-table-column>
      <el-table-column prop="allFee" label="总佣金" align="center" width="80">
      </el-table-column>
      <el-table-column prop="realFee" label="实际佣金" align="center" width="100">
      </el-table-column>
      <el-table-column prop="orderUserUid" label="下单者" align="center" width="100">
      </el-table-column>
      <el-table-column prop="orderUserFee" label="下单者佣金" align="center" width="100">
      </el-table-column>
      <el-table-column prop="chiefUid" label="邀请人" align="center" width="100">
      </el-table-column>
      <el-table-column prop="chiefFee" label="邀请人佣金" align="center" width="100">
      </el-table-column>
      <el-table-column prop="statusDesc" label="状态" align="center" width="100">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" :current-page="queryParam.page" @size-change="handleSizeChange"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" background :total="count">
    </el-pagination>
  </el-card>
</template>

<script>
  import {
    getActivityOrderList,
    syncActivityOrder
  } from '@/apis/XcxApi'

  export default {
    name: 'Order',
    data() {
      return {
        orders: [],
        queryParam: {
          page: 1,
          size: 10
        },
        count: 0,
        loading: false,
        requestSyncActivityOrder: false,
        orderStatus: [{
          code: 0,
          msg: '未付款'
        }, {
          code: 1,
          msg: '已付款'
        }, {
          code: 2,
          msg: '待结算'
        }, {
          code: 3,
          msg: '已结算'
        }, {
          code: 4,
          msg: '无效订单'
        }]
      }
    },
    created() {
      this.getActivityOrderList()
    },
    methods: {
      // 查询订单列表
      getActivityOrderList() {
        this.loading = true
        getActivityOrderList(this.queryParam).then(res => {
          if (res.data) {
            this.orders = res.data.getActivityOrders
            this.count = res.data.count
          } else {
            this.orders = []
            this.count = 0
          }
          this.loading = false
        })
      },
      // 从聚推客同步订单
      syncActivityOrder() {
        this.requestSyncActivityOrder = true
        syncActivityOrder().then(res => {
          this.$message.success('订单同步条数' + res.data)

          this.requestSyncActivityOrder = false
          this.queryParam = {
            page: 1,
            size: 10
          }
          this.getActivityOrderList()
        })
      },
      change() {
        this.queryParam.page = 1
        this.getActivityOrderList()
      },
      // 每页显示的数量改变时
      handleSizeChange(val) {
        this.queryParam.size = val
        this.getActivityOrderList()
      },
      // 当前页码改变时
      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getActivityOrderList()
      }
    }
  }
</script>

<style scoped>
  .el-pagination {
    margin-top: 10px;
  }
</style>
